<script setup>
import CommonChart from "@/components/commonChart.vue";
import { onMounted, ref, watch } from 'vue'
import { useWeatherStore } from '@/stores/counter'
import { useRouter } from 'vue-router'
const WeatherStore = useWeatherStore()
const route = useRouter()
const localdataList = ref(null)
const text = ref('')
const key = ref('')
let isShow = ref(null)
let hide = ref(false)
let isCursor = ref(false)
let tip = ref('')
let debounceTimer = null
const city = ref('')
const adcode = ref('')
const _city = ref('')
const _adcode = ref('')

function ShowOperate(id) {
    isShow.value = id
}
function CloseOperate() {
    isShow.value = null
}
async function SearchWeather() {
    if (tip.value !== '似乎没有找到你查找的城市') {
        route.push(`/weather/${_adcode.value}?search=${_city.value}`)
    } 
    else {
        alert('请输入正确的地名')
    }
}

function ShowWeather(adcode, city) {
    route.push(`/weather/${adcode}?search=${city}`)
}

function handledelete(adcode) {
    WeatherStore.deldata(adcode)
}
function debounce(func, delay = 1000) {
    return function (...args) {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}
const MatchCity = debounce(async () => {
    key.value = WeatherStore.key
    if (text.value !== '') {
        hide.value = true
        const errorMessage = await WeatherStore.getAdecode(text.value, key.value)
        if (errorMessage) {
            tip.value = errorMessage
        } else {
            if (WeatherStore.Address.district.length > 0) {
                tip.value = WeatherStore.Address.district;
                _city.value = WeatherStore.Address.district;
            } else if (WeatherStore.Address.city.length > 0) {
                tip.value = WeatherStore.Address.city;
                _city.value = WeatherStore.Address.city;
            } else if (WeatherStore.Address.province.length > 0) {
                tip.value = WeatherStore.Address.province;
                _city.value = WeatherStore.Address.province;
            }
            else {
                tip.value = '似乎没有找到你查找的城市'
            }
            _adcode.value = WeatherStore.Address.adcode;
        }
    } else {
        hide.value = false
        tip.value = ''
        _city.value = ''
        _adcode.value = ''
    }
});
onMounted(async () => {
    key.value = WeatherStore.key
    const res = await WeatherStore.getLocallocation(key.value)
    city.value = res.city
    adcode.value = res.adcode
})
watch([() => tip.value, () => WeatherStore.DataList], ([newtip, newList]) => {
    if (newtip !== '似乎没有找到你查找的城市' && newtip !== '对不起网络似乎出了点问题 请稍后再查询') {
        isCursor.value = true;
    } else {
        isCursor.value = false;
    }
    localdataList.value = newList;
}, { immediate: true });
</script>
<template>
  <div class="pt-4 mb-8 relative">
    <input type="text" placeholder="请输入城市名称"
      class="py-2 px-1 w-full bg-transparent border-b focus:border-weather-secondary focus:outline-none focus:shadow-md"
      v-model="text" @input="MatchCity" />
    <ul class="absolute bg-weather-secondary text-white w-full shadow-md py-2 px-1 top-[62px]" :class="[hide ? 'opacity-1' : 'opacity-0', isCursor ? 'cursor' : '']">
      <li class="py-2 cursor-pointer" @click="SearchWeather">{{tip}}</li>
    </ul>
  </div>
  <div  v-if="localdataList.length !== 0" class="mt-10 max-h-[300px] overflow-y-auto scrollbar-thin hover:scrollbar-thumb-blue-300">
        <div class="flex justify-between" v-for="localdata in localdataList" :key="localdata.adcode" @mouseenter="ShowOperate(localdata.adcode)" @mouseleave="CloseOperate">
            <div :class="isShow === localdata.adcode ? 'mb-4 bg-weather-secondary py-2 px-4 flex justify-between cursor-pointer w-full duration-300 w-4/5' : 'mb-4 bg-weather-secondary py-2 px-4 flex justify-between cursor-pointer w-full duration-300'" >
                <!-- <div :class="isShow === localdata.adcode ? 'w-4/5' : ''"> -->
                    <h3>{{ localdata.city }}</h3>
                    <span>{{ localdata.temperature }}度</span>
                <!-- </div> -->
            </div>
                <div :class="isShow === localdata.adcode ? 'flex mb-4 gap-2' : 'display-none'">
                    <button class="bg-yellow-500 text-center w-[80px]" @click="ShowWeather(localdata.adcode, localdata.city)">查看</button>
                    <button class="bg-yellow-500 text-center w-[80px]" @click="handledelete(localdata.adcode)">删除</button>
                </div>
           
        </div>
  </div>
  <h2 class="text-center duration-200" v-else> 暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。 </h2>
  <h2 class="mt-6">近期天气</h2>
 

  <CommonChart :city="city" :adcode="adcode" />

</template>

<style scoped>
.bg-weather-secondary {
    --tw-bg-opacity: 1;
    background-color: rgb(0 78 113 );
}

.display-none {
  display: none;
}

</style>